import {Card, Form, Input, Button, Select, Table, Image, Radio, Pagination, DatePicker, Space} from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN';
import 'moment/locale/zh-cn';
import moment from 'moment';
import {
    SearchOutlined,
    ArrowDownOutlined,
    ArrowUpOutlined, RedoOutlined, PushpinOutlined,
} from '@ant-design/icons';
import Page from '../../components/User/Page'
import React,{useState,useEffect} from 'react'
import './User.less'
import http from "../../utils/http";
const User =()=> {
    const { RangePicker } = DatePicker;
    //头部div
    const [height, setHeight] = useState(true);
    const [searchVal,setSearchVal]=useState('');
    const [dates,setDates] = useState(['','']);
    const [page,setPage]=useState(1);
    const [tableData,setTableData]=useState([]);
    const [momentVal,setMomentVal] = useState('');
    const [tableTotal,setTableTotal] = useState(0);

    useEffect(()=>{
        setMomentVal(moment);
    },[])
    useEffect(()=>{
        getTableData();
    },[page])

    let close=()=>{
        setHeight(!height);
    }

    const columns = [
         { title: 'UID',
             dataIndex: 'id',
             key: '1',
             width:'10%'
         },
         { title: '头像',
             dataIndex: 'headPhoto',
             img:'',
             key: '2' ,
             render: (img, user)=>
                 // console.log(user.img);
                 <Image src={user.headPhoto} style={{width:'50px',height:'50px'}}/>
         },
         { title: '用户名称',
             dataIndex: 'username',
             key: '3' },
         { title: '联系方式',
             dataIndex: 'phone',
             key: '4' },
         { title: '微信号',
             dataIndex: 'weChat',
             key: '5' },
         { title: '注册时间',
             dataIndex: 'regTime',
             key: '6' },
         { title: '登入日期',
             dataIndex: 'loginTime',
             key: '7' },
         { title: '购买件数',
             dataIndex: 'totalNum',
             key: '8' },
         { title: '消费金额',
             dataIndex: 'totalMoney',
             key: '9' },
     ];

    const search=()=>{
        getTableData();
    }
    const reset=()=>{
        setDates(['','']);
        setMomentVal(moment)
        setSearchVal('');
    }
    const onChangePage = (ev) =>{
        console.log(ev)
        setPage(parseInt(ev))
    }
    const onChangeDate = (ev,e) => {
        if(ev){
            let date = ev.map((v)=>v.format('YYYY-MM-DD'));
            date[0] = date[0] + ' 00:00:00';
            date[1] = date[1] + ' 23:59:59';
            setDates(date);
            setMomentVal([ev[0],ev[1]])
            console.log(date)
        }else {
            setDates(['','']);
            setMomentVal(['','']);
        }
    }
    const firstPage = () => {
        setPage(1);
    }

    const getTableData = () => {
        http({
            url:'api/user/findUsers',
            method:'post',
            params:{
                num: 5,
                page: page,
                condition: searchVal,
                regFrom: dates[0],
                regTo: dates[1]
            }
        }).then(res=>{
            if(res.code == 200){
                setTableTotal(res.info.total);
                setTableData(res.info.list)
            }
            console.log(res)
        })
    }
    return(
        <div className='user-bigBox'>
            <Card className='user-formCard'>
                <div className={'user-form'}  style={{height:height ? '110px' :'0px',overflow:'hidden',transition:'all 0.2s linear'}}>
                    <div className='topleft' style={{marginLeft:'2%'}}>
                        <div className="icons-list">
                            <div className='form'>
                                <PushpinOutlined className='icon'/>
                                <span style={{marginLeft: '20px',fontWeight:'bold'}}>筛选</span>
                                <span style={{marginLeft: '20px',fontWeight:'bold'}}>注册时间：</span>
                                <Space>
                                    <RangePicker
                                        format="YYYY-MM-DD"
                                        onChange={onChangeDate}
                                        locale={locale}
                                        value={momentVal}
                                    />
                                </Space>
                            </div>
                            <div className='form'>
                                <SearchOutlined className='icon'/>
                                <span style={{marginLeft: '20px',fontWeight:'bold'}}>搜索</span>
                                <span style={{marginLeft: '20px',fontWeight:'bold'}}>精准搜索：</span>
                                <Input allowClear style={{width: 288}} placeholder="请输入用户名称/手机号/微信号" value={searchVal} onChange={(ev)=>{setSearchVal(ev.target.value)}}/>
                            </div>
                        </div>
                    </div>
                </div>
                <div className='bottom' style={{padding:'5px 20px'}}>
                    <Button
                        type="primary"
                        icon={height ? <ArrowUpOutlined style={{fontWeight:'bold',fontSize:'16px'}}/>:<ArrowDownOutlined  style={{fontWeight:'bold',fontSize:'16px'}}/>}
                        style={{backgroundColor:'#171c49',fontSize:'12px',fontWeight:'bold'}}
                        className='bottomBtn'
                        onClick={close}
                    >
                        {height?"收起":"展开"}
                    </Button>
                    <Button type="primary" icon={<RedoOutlined style={{fontWeight:'bold',fontSize:'16px'}} />} style={{backgroundColor:'#ffc306',fontSize:'12px'}}  className='bottomBtn' onClick={reset}>
                        重置
                    </Button>
                    <Button  style={{fontSize:'12px',fontWeight:'bold'}} type="primary" icon={<SearchOutlined  style={{fontWeight:'bold',fontSize:'16px'}}/>} onClick={search}>
                        搜索
                    </Button>
                    <Input type="text" placeholder='请输入用户名称/手机号/微信号' className='input' style={{display:height?'none':'inline'}}  value={searchVal} onChange={(ev)=>{setSearchVal(ev.target.value)}}/>
                </div>
            </Card>

            <Card className='user-tableCard'>
                <Table columns={columns} dataSource={tableData} pagination={false}/>
            </Card>

            <Card className='user-page'>
                    <Pagination style={{width:'auto'}} current={page} onChange={onChangePage} total={tableTotal} defaultPageSize={5} />
                    <Button style={{marginRight:'30px'}} onClick={firstPage}>首页</Button>
            </Card>
        </div>
    );
};
 export default User;